<template>
	<view style="margin: 40rpx;">
		<!-- <u-time-line>
			<u-time-line-item node-top="2" v-for="(item, index) in data.express_info" :key="index">
				<template v-slot:node >
					<view v-if="item.show_node">
						<view class="u-node" style="background: #19be6b;" v-if="index == 0">
							<u-icon v-if="item.status == '签收'" name="pushpin-fill" color="#fff" :size="24"></u-icon>
							<u-icon v-if="item.status == '派件'" name="account-fill" color="#fff" :size="24"></u-icon>
							<u-icon v-if="item.status == '在途'" name="car-fill" color="#fff" :size="24"></u-icon>
							<u-icon v-if="item.status == '揽件'" name="file-text-fill" color="#fff" :size="24"></u-icon>
						</view>
						<view class="u-node" v-else>
							<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
						</view>
					</view>
					<view v-else>
						<view style="width: 20rpx;height: 20rpx;border-radius: 10rpx;background-color: #ccc;margin-top: 20rpx;"></view>
					</view>
					
				</template>
				<template v-slot:content>
					<view>
						<view class="u-order-title" v-if="item.show_node">{{item.status}}</view>
						<view class="u-order-desc">{{item.context}}</view>
						<view class="u-order-time">{{item.time}}</view>
					</view>
				</template>
			</u-time-line-item>
		</u-time-line> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: null,
				solicitation:[],//揽件
				transport:[], //运输
				delivery:[],//派件
				signfor:[] //签收
			}
		},
		onLoad({data}) {
			this.data = JSON.parse(data)
			this.data.express_info[0].show_node = 1
			let currentStatus = this.data.express_info[0].status
			for(let i = 1; i < this.data.express_info.length; i++){
				if(currentStatus == this.data.express_info[i].status){
					this.data.express_info[i].show_node = 0
				}else{
					currentStatus = this.data.express_info[i].status
					this.data.express_info[i].show_node = 1
				}
			}
			
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
		margin-top: 16rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>